<template>
  <div class="page-container">
    <!--工具栏-->
    <div class="toolbar" style="float:left;padding-top:10px;padding-left:15px;">
      <el-form :inline="true" :model="filters" :size="size">
        <el-row style="text-align: left;">
          <el-form-item label="名称">
            <el-input v-model="filters.name" placeholder="名称搜索"></el-input>
          </el-form-item>
          <el-form-item label="类型">
            <el-select v-model="filters.pageType">
              <el-option label="平台首页" value="1">平台首页</el-option>
              <el-option label="文章页" value="2">文章页</el-option>
              <el-option label="平台营销页" value="3">平台营销页</el-option>
              <el-option label="店铺首页" value="4">店铺首页</el-option>
              <el-option label="平台营销页" value="5">平台营销页</el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="平台">
            <el-select v-model="filters.platform">
              <el-option label="H5" value="1">H5</el-option>
              <el-option label="PC" value="2">PC</el-option>
            </el-select>
          </el-form-item>

        </el-row>

        <el-row style="text-align: left;">
          <el-form-item>
            <kt-button icon="fa fa-search" :label="$t('action.search')"  type="primary" @click="findPage(filters)"/>
          </el-form-item>
          <el-form-item>
            <kt-button icon="fa fa-refresh" :label="$t('action.reset')" @click="reset" type="primary" />
          </el-form-item>
        </el-row>
        <el-row style="text-align: left;">
          <el-form-item>
            <el-button type="primary" plain @click="handleAdd">新增</el-button>
          </el-form-item>

        </el-row>
        <el-row style="text-align: left;">

           <div>
             <el-radio v-model="platformR" label="1">H5</el-radio>
             <el-radio v-model="platformR" label="2">PC</el-radio>
           </div>

        </el-row>
      </el-form>
    </div>

    <div  >


      <div style="clear:both" v-for="(item,key) in cmsTpages" @click="selectimg(item,key)" >
         
           

        <img   :src="item.previewImg" alt="">
        <el-button type="primary" plain @click="handleUse(item.id)">使用</el-button>
        <el-button type="primary" plain @click="handleEdit(item.id)">编辑</el-button>
        <el-button type="primary" plain @click="handleDelete(item.id)">删除</el-button>
        <p>{{item.name}}</p>


      </div>



    </div>



  </div>


</template>
<script src="//unpkg.com/element-ui@2.12.0/lib/index.js"></script>
<script>
  import PopupTreeInput from "@/components/PopupTreeInput"
  import JicTable from "@/views/Core/JicTable"
  import KtButton from "@/views/Core/KtButton"
  import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog"
  import { format } from "@/utils/datetime"
  import axios from 'axios'
  export default {
    components:{
      PopupTreeInput,
      KtButton,
      TableColumnFilterDialog
    },
    data() {
      return {
        imgUpload:this.utils.getUpLoadHost(),
        size: 'small',
        document_license:'',
        filters: {
          name: ''
        },

        cmsTpages:'',
        fileList:{},
        platformR:[],

        selected:"",
        pageRequest: { pageNum: 1, pageSize: 10 },
        pageResult: {},
        dialogImageUrl: '',

        operation: false, // true:新增, false:编辑
        dialogVisible: false, // 新增编辑界面是否显示
        editLoading: false,
        printPage: false,
        dataFormRules: {
        },

      }
    },
    methods: {
      // 获取分页数据
      findPage: function (data) {
        /**
         * 子组件传过来的分页参数
         * data.start 当前页
         * data.limit 当前页总条数
         * */

        if(data != null && data.start != null){
          if(data.start != null){
            this.pageRequest.pageNum = data.start;
          }
          if(data.limit != null){
            this.pageRequest.pageSize = data.limit;
          }
        }

        let this_ = this;
        if (this_.filters == undefined || this_.filters == null) {
          this_.filters = {};
        }
        this_.filters.start = this.pageRequest.pageNum;
        this_.filters.limit = this.pageRequest.pageSize;
        this.utils.request.getCmsTpageList(this_.filters, function (data) {
          console.log("123");
          console.log(data.data);
          this_.cmsTpages = data.data.rows
        })
      },



      reset:function(){
        this.filters={};
        this.findPage()
      },

      // 时间格式化
      dateFormat: function (row, column, cellValue, index){
        return format(row[column.property])
      },




      pageType: function(row, column, cellValue, index){
        if(cellValue==1){
          return '平台首页'
        }else if(cellValue==2){
          return '文章页';
        }else if(cellValue==3){
          return '营销页';
        }else if(cellValue==4){
          return '店铺首页';
        }else{
          return '店铺营销页';
        }
      },
      platform: function(row, column, cellValue, index){
        if(cellValue==1){
          return 'H5'
        }else if(cellValue==2){
          return 'PC';
        }
      },
      status: function(row, column, cellValue, index){
        if(cellValue==0){
          return '草稿'
        }else if(cellValue==1){
          return '已发布';
        }else if(cellValue==2){
          return '下架';
        }
      },

      // 显示新增界面
      handleAdd: function (productId) {
        this.$router.push({
          path: '/AddCmsTpages/'
        })
      },
      // 使用
      handleUse: function (id) {


        var params = {};
        params.id = id;

        var this_ = this;
        this.utils.request.useCmsTpage(params, function (res) {
          if (res.code == "0000") {
            // this_.$message({message: "操作成功", type: "success"});
            // this_.findPage(null);

            this_.$router.push({
              path: '/CmsPage?id =' + res.data
            })

          } else {
            this_.$message({message: "操作失败, " + res.msg, type: "error"});
          }
        });



      },
      // 编辑
      handleEdit: function (params) {

        this.$router.push({
          path: '/CmsPage?id =' + params.row.id
        })

      },
      // 删除
      handleDelete: function (id) {

        var params = {};
        params.id = id;

        var this_ = this;
        this.utils.request.deleteCmsTpage(params, function (res) {
          if (res.code == "0000") {
            this_.$message({message: "操作成功", type: "success"});
            this_.findPage(null);
          } else {
            this_.$message({message: "操作失败, " + res.msg, type: "error"});
          }
        });

      },
      selectimg:function (data) {

      }

    },
    mounted() {
      this.findPage()

    }

  }
</script>

<style scoped>
  /deep/ .el-input__inner {
        width: 200px;
  }
   .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
        margin-bottom: 10px;
  }
  .div1 {

    float: left;
  }

</style>
